<!-- 历史记录 -->
<template>
  <div class="heaHistory-container">
    <div class="main">
      <a
        class="item"
        @click="headleSelect(item)"
        v-for="(item, index) in readHistorySelect"
        :key="item.id"
        :class="{ active: item.isSelected }"
      >
        <div class="text">
          <div :class="{ circle: item.isSelected }"></div>
          <div>{{ item.title }}</div>
        </div>
        <Icon type="close" v-if="index !== 0" @click.stop="headleClose(item)"></Icon>
      </a>
    </div>
  </div>
</template>

<script setup>
import Icon from "@/components/Icon/index.vue";
import { useMenuStore } from "@/store/useMenuStore.js";
import { storeToRefs } from "pinia";
import {useRouter} from "vue-router"
const { readHistorySelect } = storeToRefs(useMenuStore());
// console.log(readHistorySelect);
const { delHistorey, getSelectHistorey } = useMenuStore();
const router = useRouter()
// 关闭
const headleClose = (data) => {
  delHistorey(data);
};

// 选中历史记录的
const headleSelect = (data) =>{

  getSelectHistorey(data)
  
}
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.heaHistory-container {
  padding: 0 30px;
  width: 100%;
  height: 30px;
  background: @white;
  .main {
    display: flex;
    height: 100%;
    align-items: center;
    .item {
      display: flex;
      align-items: center;
      padding: 0 10px;
      height: 25px;
      line-height: 25px;
      border: 1px solid @dark;
      margin-right: 10px;
      .icon-container {
        margin-left: 5px;
        cursor: pointer;
      }
      &:last-child {
        margin-right: 0;
      }
      &.active {
        background: #42b983;
        color: @white;
        border: 0;
      }
      .text{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .circle {
        margin-right: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: @white;
      }
    }
  }
}
</style>